<template>
  <view class="pwd-container">
    <view class="form-container">
      <view class="form-item">
        <text class="label">旧密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="user.oldPassword" 
          placeholder="请输入旧密码" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">新密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="user.newPassword" 
          placeholder="请输入新密码(4-16位)" 
          placeholder-class="placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">确认密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="user.confirmPassword" 
          placeholder="请再次输入新密码" 
          placeholder-class="placeholder"
        />
      </view>
      
      <button class="submit-btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  import { updateUserPwd } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        }
      }
    },
    methods: {
      submit() {
        // 验证旧密码
        if (!this.user.oldPassword) {
          uni.showToast({
            title: '请输入旧密码',
            icon: 'none'
          })
          return
        }
        
        // 验证新密码
        if (!this.user.newPassword) {
          uni.showToast({
            title: '请输入新密码',
            icon: 'none'
          })
          return
        }
        
        // 验证新密码长度(后端要求4-16位)
        if (this.user.newPassword.length < 4 || this.user.newPassword.length > 16) {
          uni.showToast({
            title: '新密码长度在4到16个字符',
            icon: 'none'
          })
          return
        }
        
        // 验证确认密码
        if (!this.user.confirmPassword) {
          uni.showToast({
            title: '请输入确认密码',
            icon: 'none'
          })
          return
        }
        
        // 验证两次密码是否一致
        if (this.user.newPassword !== this.user.confirmPassword) {
          uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
          })
          return
        }
        
        // 提交修改
        uni.showLoading({
          title: '提交中...',
          mask: true
        })
        
        updateUserPwd(this.user.oldPassword, this.user.newPassword)
          .then(response => {
            uni.hideLoading()
            
            // 显示成功提示
            uni.showModal({
              title: '修改成功',
              content: '密码已修改,请重新登录',
              showCancel: false,
              success: () => {
                // 清除token和用户信息
                uni.removeStorageSync('App-Token')
                uni.removeStorageSync('userInfo')
                
                // 清空 Vuex store 中的用户信息
                this.$store.commit('SET_TOKEN', '')
                this.$store.commit('SET_NAME', '')
                this.$store.commit('SET_AVATAR', '')
                
                // 跳转到登录页
                uni.reLaunch({
                  url: '/pages/login'
                })
              }
            })
          })
          .catch(error => {
            uni.hideLoading()
            console.error('修改密码失败:', error)
            uni.showToast({
              title: typeof error === 'string' ? error : '修改失败,请检查旧密码是否正确',
              icon: 'none',
              duration: 3000
            })
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .pwd-container {
    min-height: 100vh;
    padding: 20px;
  }

  .form-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .form-item {
    margin-bottom: 20px;
  }

  .label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .input {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fafafa;
  }

  .input:focus {
    border-color: #409eff;
    background-color: white;
  }

  .placeholder {
    color: #c0c0c0;
  }

  .submit-btn {
    width: 100%;
    height: 44px;
    margin-top: 30px;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
  }

  .submit-btn:active {
    opacity: 0.8;
  }
</style>
